---
title: "Row Grouping - Single Column"
enterprise: true
---
Display the group structure with a single generated column in the grid.

{% gridExampleRunner title="Enabling Single Group Column" name="enabling-single-group-column" /%}

## Enabling a Single Group Column

The example above demonstrates that both `country` and `year` are grouped. Only a single group column is used to
display the group value cells.

The Single Group Column is enabled by default, but it can be set explicitly by setting the `groupDisplayType` grid option
to `"singleColumn"` as shown below:

```{% frameworkTransform=true %}
const gridOptions = {
    groupDisplayType: 'singleColumn',
}
```

## Configuration

The Single Group Column is added to the grid when row grouping is present, and can be configured via the `autoGroupColumnDef` grid
option to define [Column Options](./column-properties/).

{% gridExampleRunner title="Single Group Column Configuration" name="single-group-column-configuration" /%}

The example above uses the configuration demonstrated below to change the columns header name, apply a minimum width, and display
`athlete` values in the leaf level rows.
It also [Configures the Group Cell Component](./grouping-single-group-column/#cell-component) using the `cellRendererParams` option to remove
the count from each row group.

```{% frameworkTransform=true %}
const gridOptions = {
    autoGroupColumnDef: {
        headerName: 'My Group',
        field: 'athlete',
        minWidth: 220,
        cellRendererParams: {
            suppressCount: true,
        }
    },
}
```

## Cell Component
The group column uses the `agGroupCellRenderer` component to display the group information, as well as the chevron control
for expanding and collapsing rows. The renderer also embeds the grouped columns renderer and displays this inside of the group cell.

This can be configured with several [Group Renderer Properties](./grouping-single-group-column/#configurable-options) using
the `autoGroupColumnDef` property `cellRendererParams`. The example below removes the row count and also [Configures Row Selection](./grouping-row-selection/#checkboxes-in-group-cells) to enable checkboxes for row selection.

{% gridExampleRunner title="Group Cell Renderer Configuration" name="renderer-config-group-cell" /%}

The example above demonstrates the following configuration:
```{% frameworkTransform=true %}
const gridOptions = {
    columnDefs: [
        { field: 'total', rowGroup: true, cellRenderer: CustomMedalCellRenderer },
        // ... other column definitions
    ],
    autoGroupColumnDef: {
        cellRendererParams: {
            suppressCount: true,
        }
    },
    rowSelection: {
        mode: 'singleRow',
        checkboxLocation: 'autoGroupColumn',
    }
}
```

### Configurable Options

{% interfaceDocumentation interfaceName="IGroupCellRendererParams" overrideSrc="group-cell-renderer/group-cell-renderer.json" config={ "description": "" } /%}

### Checkbox Selection

The `agGroupCellRenderer` can be configured to show checkboxes for row selection. Setting the [Row Selection](./row-selection/)
`checkboxLocation` property to `'autoGroupColumn'` hides the [Checkbox Column](./row-selection-single-row/#customising-the-checkbox-column)
instead using the group cell renderer to display checkboxes.

{% gridExampleRunner title="Group Cell Renderer Checkbox Selection" name="renderer-config-checkbox" /%}

The example above demonstrates the following configuration:
```{% frameworkTransform=true %}
const gridOptions = {
    rowSelection: {
        mode: 'multiRow',
        selectAll: 'all',
        checkboxLocation: 'autoGroupColumn',
    },
}
```

### Custom Inner Renderer

When using the group cell renderer, the `agGroupCellRenderer` component will inherit the grouped columns renderer and display this inside of the group cell,
adjacent to any configured checkboxes, cell count, and the expand/collapse chevron control.

This inner renderer can be overridden with a [Custom Cell Component](./component-cell-renderer/) by setting the `innerRenderer` and `innerRendererParams` properties
on the `cellRendererParams` configuration.

{% gridExampleRunner title="Group Cell Renderer Configuration" name="renderer-config-inner" /%}

The example above uses the following configuration to provide a custom inner renderer to the group column:
```{% frameworkTransform=true %}
const gridOptions = {
    autoGroupColumnDef: {
        cellRendererParams: {
            innerRenderer: CustomMedalCellRenderer,
        },
    },
}
```

### Custom Cell Renderer

The Group Cell Renderer can be entirely replaced with a [Custom Cell Component](./component-cell-renderer/) by setting the `cellRenderer`
property on the `autoGroupColumnDef` configuration.

{% gridExampleRunner title="Custom Group Cell Renderer" name="renderer-config-custom" /%}

{% note %}
It is also possible to [Determine Cell Renderers Dynamically](./component-cell-renderer/#dynamic-component-selection).
{% /note %}

## Filtering

The grid filters leaf rows by default, if all of a groups children are filtered out, the group is also hidden.

### Inherit Row Grouped Columns Filters

The single group column content changes depending on the columns which have row grouping enabled. The `agGroupColumnFilter` can
be used to display the filters for the columns with row grouping enabled.

{% gridExampleRunner title="Group Column Filtering" name="filtering-grouped-columns" /%}

The example above demonstrates the following configuration to enable the group column filter:
```{% frameworkTransform=true %}
const gridOptions = {
    autoGroupColumnDef: {
        filter: 'agGroupColumnFilter',
        floatingFilter: true,
    },
}
```

{% warning %}
When accessing filter instances via API, access the filters on the columns with row grouping.
{% /warning %}

### Tree Filter

The `agSetColumnFilter` can be used to filter the group column in a [Tree List](./filter-set-tree-list/), representing the hierarchy of
the row groups.

{% gridExampleRunner title="Hierarchical Set Filter" name="filtering-set-hierarchy" /%}

{% note %}
The tree filter needs a value for each leaf row. In absence of a `field` or `valueGetter` on the group column, provide a `filterValueGetter`
to the group column definition.
{% /note %}

The example above demonstrates the following configuration to enable the tree set filter:
```{% frameworkTransform=true %}
const gridOptions = {
    autoGroupColumnDef: {
        filter: 'agSetColumnFilter',
        filterValueGetter: (params) => params.data.athlete,
        filterParams: {
            treeList: true,
            keyCreator: (params) => (params.value ? params.value.join('#') : null),
        },
    },
}
```

Refer to the [Tree List Filter](./filter-set-tree-list/) documentation for further configuration options.

### Text Filtering

Providing a filter value getter to the group column allows for a simple string search of any group level.

{% gridExampleRunner title="Custom Group Column Filter" name="filtering-custom" /%}

The example above demonstrates using a filter value getter which returns an array of ancestor row keys. This enables searching for any group value
containing the filter text:
```{% frameworkTransform=true %}
const gridOptions = {
    autoGroupColumnDef: {
        filter: 'agTextColumnFilter',
        filterValueGetter: (params) => params.node.parent.getRoute(),
    },
}
```

## Next Up

Continue to the next section to learn about the [Multiple Group Columns](./grouping-multiple-group-columns/) display type.
